/*
 * @Author: Jimmy
 * @LastModifiedBy: Jimmy
 * @Date: 2024-12-10 20:32:48
 * @LastEditTime: 2025-02-18 19:12:54
 * @FilePath: /monitor_belt/src/views/home/components/ware/edges/label_edge.tsx
 */
import { useEffect, useState } from "react";
import {
  BaseEdge,
  EdgeLabelRenderer,
  getBezierPath,
  useReactFlow,
} from "@xyflow/react";
import { CloseCircleOutlined } from "@ant-design/icons";

const LabelEdge = (props: any) => {
  let {
    id,
    sourceX,
    sourceY,
    targetX,
    targetY,
    sourcePosition,
    targetPosition,
    markerEnd,
  } = props;
  const { getEdges } = useReactFlow();
  const [edgePath, labelX, labelY] = getBezierPath({
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
  });
  //当前标签连接信息
  const [source, setSource] = useState<any>(null);

  useEffect(() => {
    let current = getEdges().find((edge: any) => edge.id == id);
    console.log(current);
    setSource(current);
  }, [id]);

  return (
    <>
      <BaseEdge
        path={edgePath}
        markerEnd={markerEnd}
        strokeWidth={2}
        style={source?.animated ? { stroke: "#76ca66",strokeWidth:4} : { stroke: "red",strokeWidth:4 }}
      />
      <EdgeLabelRenderer>
        {source?.animated ? null : (
          <div
            style={{
              position: "absolute",
              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
              fontSize: 12,
              pointerEvents: "all",
            }}
          >
            <CloseCircleOutlined style={{ fontSize: "24px", color: "red" }} />
          </div>
        )}
      </EdgeLabelRenderer>
    </>
  );
};

export default LabelEdge;
